<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="纪德朝">
    <title>星级评分</title>
    <style>
    ul{
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
    }
    li{
        margin: 0 10px;
    }
    a{
        text-decoration: none;
        display: inline-block;
        width: 20px;
        height: 20px;
        background-image: url('./img/star.png');
        background-position: 0 0;
    }
    .active{
        display: inline-block;
        width: 20px;
        height: 20px;
        background-image: url('./img/star.png');
        background-position: 0 -30px;
    }
    span{
        width: 300px;
        font-size: 12px;
    }
    li{
        position: relative;
    }
    p{
        position: absolute;
        width: 300px;
        font-size: 12px;
        display: none;
    }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="#"></a>
            <p></p>
        </li>
        <li>
            <a href="#"></a>
            <p></p>
        </li>
        <li>
            <a href="#"></a>
            <p></p>
        </li>
        <li>
            <a href="#"></a>
            <p></p>
        </li>
        <li>
            <a href="#"></a>
            <p></p>
        </li>
        <span></span>
    </ul>
    <script src=".//js/jquery.js"></script>
</body>
<script>
    var lis = document.querySelectorAll('li');
    var count = 0;
    var score = 0;
    var msg = [
        "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
        "不满意|部分有破损，与卖家描述的不符，不满意",
        "一般|质量一般，没有卖家描述的那么好",
        "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
        "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
    ];
    function show(k){
        for(var i= 0;i<lis.length;i++){
            if(i<k){
                $('a').eq(i).addClass('active');
            }else{
                $('a').eq(i).removeClass('active');
            }           
        }
    }
    console.log(msg[0]);
     
    $('li').hover(function(index){
        // console.log($(this).index());
        count = $(this).index()+1;
        $(this).find('p').show();
        show(count);
        $('p').html('<b style="color:red;">'+count+'分,'+'</b>'+'<b>'+msg[$(this).index()].split('|')[0]+'</b>'+'<br>'+msg[$(this).index()].split('|')[1]);
        $('li').click(function(ev){
        score = $(this).index()+1;
        $('span').html('<b style="color:red;">'+score+'分,'+'</b>'+'<b>'+msg[$(this).index()].split('|')[0]+'</b>'+'<br>'+msg[$(this).index()].split('|')[1]);      
    });   
    },function(){
        count = $(this).index();
        $(this).find('p').hide();
        show(score);
    });
    
    


</script>
</html>